import style from './index.module.css';
import React, { useState } from 'react';
import { TreeSelect, Tree, Input, Radio } from 'antd';

const treeData = [
  {
    title: '泛普ERP在线试用',
    key: '0-0',
    children: [
      {
        title: '总经办',
        key: '0-0-0',
        state:"否",
        children: [
          { title: '综合管理部', key: '0-0-0-0', top:"总经办", state:"否"},
          { title: '投资发展部', key: '0-0-0-1', top:"总经办" , state:"否"},
          { title: '人事行政部', key: '0-0-0-2', top:"总经办" , state:"是"},
          { title: '财务部', key: '0-0-0-3', top:"总经办" , state:"否"},
          { title: '企管部', key: '0-0-0-4', top:"总经办", state:"是" },
          { title: '研发部', key: '0-0-0-5', top:"总经办" , state:"否"},
          {
            title: '经营部',
            key: '0-0-0-6',
            top:"总经办",
            children: [
              { title: '市场部', key: '0-0-0-6-0' , top:"经营部", state:"否"},
              { title: '销售部', key: '0-0-0-6-1', top:"经营部" , state:"是"},
              { title: '渠道部', key: '0-0-0-6-2' , top:"经营部", state:"是"},
              { title: '运维部', key: '0-0-0-6-3' , top:"经营部", state:"否"},
              { title: '大客户部', key: '0-0-0-6-4' , top:"经营部", state:"是"},
            ],
          },
          { title: '商务部', key: '0-0-0-7' , top:"总经办", state:"是"},
          { title: '采购部', key: '0-0-0-8' , top:"总经办", state:"是"},
          {
            title: '生产部',
            key: '0-0-0-9',
            top:"总经办",
            children: [
              { title: '装配部', key: '0-0-0-9-0' , top:"生产部", state:"是"},
              { title: '储运部', key: '0-0-0-9-1' , top:"生产部", state:"否"},
              { title: '生产一部', key: '0-0-0-9-2' , top:"生产部", state:"否"},
              { title: '生产二部', key: '0-0-0-9-3' , top:"生产部", state:"是"},
            ],
          },
          { title: '质量部', key: '0-0-0-10', top:"总经办" , state:"是"},
          { title: '工装部', key: '0-0-0-11' , top:"总经办", state:"否"},
          { title: '审计部', key: '0-0-0-12', top:"总经办" , state:"是"},
          { title: '信息部', key: '0-0-0-13', top:"总经办", state:"否" },
        ],
      },
      {
        title: '账号',
        key: '0-0-1',
      },
    ],
  },
];

const treeDatas = [
  {
    title: '泛普ERP在线试用',
    value: '泛普ERP在线试用',
    children: [
      {
        title: '总经办',
        value: '总经办',
        children: [
          { value: '综合管理部', title: '综合管理部' },
          { value: '投资发展部', title: '投资发展部' },
          { value: '人事行政部', title: '人事行政部' },
          {
            value: '财务部',
            title: '财务部',
            children: [{ value: '报销', title: '报销' }],
          },
          { value: '企管部', title: '企管部' },
          { value: '研发部', title: '研发部' },
          {
            value: '经营部',
            title: '经营部',
            children: [
              { value: '市场部', title: '市场部' },
              { value: '销售部', title: '销售部' },
              { value: '渠道部', title: '渠道部' },
              { value: '运维部', title: '运维部' },
              { value: '大客户部', title: '大客户部' },
            ],
          },
          { value: '商务部', title: '商务部' },
          { value: '采购部', title: '采购部' },
          {
            value: '生产部',
            title: '生产部',
            children: [
              { value: '装配部', title: '装配部' },
              { value: '储运部', title: '储运部' },
              { value: '生产一部', title: '生产一部' },
              { value: '生产二部', title: '生产二部' },
            ],
          },
          { value: '质量部', title: '质量部' },
          { value: '工装部', title: '工装部' },
          { value: '审计部', title: '审计部' },
          { value: '信息部', title: '信息部' },
        ],
      },
      {
        value: '超级账号',
        title: '超级账号',
      },
    ],
  },
];

export default function DeptInfo() {
  // 右边Tree树默认值
  const [TreeValue, setTreeValue] = useState<string | undefined>(undefined);
  // 右侧input框的值
  const [RightInputValue,setRightValue] = useState("")
  // 右侧 是否为分公司的状态
  const [RightState,setRightState] = useState("否")
  const onChange = (newValue: string) => {
    setTreeValue(newValue);
  };
  // 左侧Tree树改变触发
  let LeftTreeChange = (key,e) =>{
    console.log("Aa",e);
    // 改变右侧Tree的value值
    setTreeValue(e.node.top)
    // 改变右侧Input的value值
    setRightValue(e.node.title);
    setRightState(e.node.state)
  } 
  return (
    <div className={style.boxs}>
      <header></header>
      <div className={style.containers}>
        <div className={style.left}>
          <Tree
            showLine={true}
            defaultExpandedKeys={['0-0-0', '0-0-0-3', '0-0-0-6', '0-0-0-9']}
            treeData={treeData}
            style={{ marginLeft: '20px' }}
            onSelect={LeftTreeChange}
          />
        </div>
        <div className={style.right}>
          <div style={{ marginTop: '15px', marginLeft: '30px' }}>
            上级部门<i>*</i>：
            <TreeSelect
              showSearch
              style={{ width: '25%' }}
              value={TreeValue}
              dropdownStyle={{ maxHeight: 350, overflow: 'auto' }}
              placeholder=""
              allowClear
              treeDefaultExpandAll
              onChange={onChange}
              treeData={treeDatas}
            />
          </div>
          <div style={{ marginTop: '15px', marginLeft: '30px' }}>
            部门名称<i>*</i>：
            <Input style={{ width: '25%', border: '1px solid #d4d4d4' }} value={RightInputValue} />
            <br />
          </div>
          <div style={{ marginTop: '15px', marginLeft: '20px' }}>
            是否分公司：
            <Radio.Group name="radiogroup" value={RightState}>
              <Radio value={'是'} style={{ marginLeft: '10px' }}>
                是
              </Radio>
              <Radio value={'否'} style={{ marginLeft: '50px' }}>
                否
              </Radio>
            </Radio.Group>
          </div>
        </div>
      </div>
    </div>
  );
}
